<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组操作</title>
	</head>
	<body>
		<div id="app">
			<!-- 数组相关用法 队列/栈 push压栈  pop弹栈
			 push() 在最后追加元素
			 pop()  从最后删除元素
			 shift()  从开头删除元素
			 unshift()  从开头追加元素  出现笔试题
			 splice()   替换数据
			 sort()     排序 按照字符编码顺序排列
			 reverse()  数组反转
			 -->
			<!-- 对数据进行循环遍历 -->
			<span v-for="item in array">{{item}},</span><br>
			<input type="text" v-model.number="num" />
			<button @click="push">push</button>
			<button @click="pop">pop</button>
			<button @click="shift">shift</button>
			<button @click="splice1">替换第一个元素</button>
			<button @click="splice2">从头替换3个元素</button>
			<button @click="splice3">从头替换3个元素改为num,num,num</button>
			<button @click="splice4">删除第二个元素</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					array: [1,2,3,4,5],
					num: ''
				},
				methods: {
					push(){
						this.array.push(this.num)
					},
					pop(){
						this.array.pop()
					},
						
					shift(){
						this.array.shift()
					},
					splice1(){
						
						this.array.splice(0,1,this.num)
					},
					splice2(){
						this.array.splice(0,3,this.num)
					},
					splice3(){
						this.array.splice(0,3,this.num,this.num,this.num)
					},
					splice4(){
						//删除第二个数据 隐藏功能
						this.array.splice(1,1)
					},
				}
			})
		</script>
	</body>
</html>
